<template>
	<view class="content">
		<!-- 轮播图 -->
		<swiper class="room-swiper" indicator-dots autoplay :interval="3000" :duration="500" circular>
			<swiper-item v-for="(image, index) in roomInfo.images" :key="index" @click="previewImage(index)">
				<image :src="image" mode="aspectFill" class="swiper-image"></image>
			</swiper-item>
			<swiper-item v-if="!roomInfo.images || roomInfo.images.length === 0">
				<image src="/static/default-room.png" mode="aspectFill" class="swiper-image"></image>
			</swiper-item>
		</swiper>
		
		<!-- 基本信息 -->
		<view class="room-info">
			<view class="room-header">
				<view class="room-number">房间号：{{ roomInfo.room_number }}</view>
				<view class="room-price">¥{{ roomInfo.price }}/月</view>
			</view>
			<view class="room-type">{{ roomInfo.room_type }}</view>
		</view>
		
		<!-- 简介 -->
		<view class="section introduction">
			<view class="section-title">房间简介</view>
			<view class="section-content">
				{{ roomInfo.introduction || '暂无简介' }}
			</view>
		</view>
		
		<!-- 家具配置 -->
		<view class="section furniture">
			<view class="section-title">家具配置</view>
			<view class="section-content" v-if="roomInfo.furniture_list && roomInfo.furniture_list.length > 0">
				<view class="furniture-list">
					<view class="furniture-item" v-for="(item, index) in roomInfo.furniture_list" :key="index">
						<u-icon name="checkmark-circle" color="#2867CE" size="16"></u-icon>
						<text>{{ item }}</text>
					</view>
				</view>
			</view>
			<view class="section-content empty" v-else>
				暂无家具配置信息
			</view>
		</view>
		
		<!-- 联系按钮 -->
		<view class="contact-btn">
			<u-button type="primary" text="联系房东" :custom-style="{ width: '90%' }" @click="contactOwner"></u-button>
		</view>
	</view>
</template>

<script setup>
	import { ref, onMounted } from 'vue';
	
	// 数据
	const roomId = ref('');
	const roomInfo = ref({});
	
	// 生命周期
	onMounted(() => {
		const params = uni.getLaunchOptionsSync().query || {};
		const page = getCurrentPages().pop();
		
		if (page && page.options) {
			roomId.value = page.options.id;
		} else if (params.id) {
			roomId.value = params.id;
		}
		
		if (roomId.value) {
			getRoomDetail();
		} else {
			uni.showToast({
				title: '缺少房间ID',
				icon: 'none'
			});
			
			setTimeout(() => {
				uni.navigateBack();
			}, 1500);
		}
	});
	
	// 获取房间详情
	const getRoomDetail = async () => {
		uni.showLoading({
			title: '加载中'
		});
		
		try {
			const res = await uniCloud.callFunction({
				name: 'get-room-detail',
				data: {
					room_id: roomId.value
				}
			});
			
			if (res.result.code === 0) {
				roomInfo.value = res.result.data;
			} else {
				uni.showToast({
					title: res.result.message,
					icon: 'none'
				});
				
				setTimeout(() => {
					uni.navigateBack();
				}, 1500);
			}
		} catch (e) {
			console.error('获取房间详情失败', e);
			uni.showToast({
				title: '获取房间详情失败',
				icon: 'none'
			});
			
			setTimeout(() => {
				uni.navigateBack();
			}, 1500);
		} finally {
			uni.hideLoading();
		}
	};
	
	// 联系房东
	const contactOwner = () => {
		uni.makePhoneCall({
			phoneNumber: '15362030285',
			fail: () => {
				uni.showToast({
					title: '拨打电话失败',
					icon: 'none'
				});
			}
		});
	};
	
	// 预览图片
	const previewImage = (index) => {
		if (roomInfo.value.images && roomInfo.value.images.length > 0) {
			uni.previewImage({
				current: index,
				urls: roomInfo.value.images,
				indicator: 'number',
				loop: true,
				fail: () => {
					uni.showToast({
						title: '预览图片失败',
						icon: 'none'
					});
				}
			});
		}
	};
</script>

<style lang="scss" scoped>
	.content {
		background-color: #f5f6fa;
		min-height: 100vh;
	}
	
	.room-swiper {
		width: 100%;
		height: 250px;
		
		.swiper-image {
			width: 100%;
			height: 100%;
		}
	}
	
	.room-info {
		background-color: #ffffff;
		padding: 20px;
		margin-bottom: 10px;
		
		.room-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 10px;
			
			.room-number {
				font-size: 18px;
				font-weight: bold;
			}
			
			.room-price {
				color: #f56c6c;
				font-size: 18px;
				font-weight: bold;
			}
		}
		
		.room-type {
			color: #666;
			font-size: 16px;
		}
	}
	
	.section {
		background-color: #ffffff;
		padding: 20px;
		margin-bottom: 10px;
		
		.section-title {
			font-size: 16px;
			font-weight: bold;
			margin-bottom: 15px;
			position: relative;
			padding-left: 12px;
			
			&:before {
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				width: 4px;
				height: 16px;
				background-color: #2867CE;
				border-radius: 2px;
			}
		}
		
		.section-content {
			color: #666;
			line-height: 1.6;
			
			&.empty {
				color: #999;
			}
		}
	}
	
	.furniture-list {
		display: flex;
		flex-wrap: wrap;
		
		.furniture-item {
			width: 50%;
			display: flex;
			align-items: center;
			margin-bottom: 10px;
			
			text {
				margin-left: 5px;
			}
		}
	}
	
	.contact-btn {
		position: fixed;
		bottom: 30px;
		left: 0;
		width: 100%;
		display: flex;
		justify-content: center;
	}
</style> 